<template>
	<view >
		<cu-custom :bgColor="globalColor" :isBack="false">
		    <block slot="content">{{appName}}</block>
		</cu-custom>
		<view class="warnTip" v-if="showTip" :style="{top:barHeight+8 + 'px'}">
			 <span class="triangle"></span>
			点击[...]添加到我的或者桌面，下次即可快速访问哦。
			<view class="closeIcon" @click="closeNotice">
				x
			</view>
		</view>
		
		<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="3000" duration="400" style="min-height: 176px;">
			<swiper-item v-for="(item,index) in banner" :key="index" @click="bannerClick(index)">
				<image :src="item.imgUrl" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		
		<view class="cu-form-group solid-bottom cu-bar newInputWrap" style="background-color:#f1f1f1">
				<input class="nowInput"  placeholder="请输入视频或图片链接" maxlength="-1" name="input" v-model="analyseUrl"></input>
				<button class='cu-btn shadow mr5' :class="globalColor" @click="videoAnalyse">去水印</button>
				<button class='cu-btn shadow' :class="globalColor" @click="clearText" v-if="prizeType == 0">粘贴</button>
		</view>
										
			<view class="grid col-2 width98">
				<view class="pic-padding">
					<view class="radius  shadow-blur" :class="globalColor" @click="page(1)">
						<view class="nowBody">
							<view class="headWord">
								<text class="firstHead">常见问题</text>
								<view>使用问题</view>
							</view>
								<img class="headImg" src="../../static/img/book-2.png" alt="" />
						</view>
					</view>
				</view>
				<view class="pic-padding">
					<view class="radius  shadow-blur" :class="globalColor" @click="page(4)">
						<view class="nowBody">
							<view class="headWord">
								<text class="firstHead">视频 / 图片</text>
								<view>去水印</view>
							</view>
							<img class="headImg" src="../../static/img/file-4.png" alt="" />
						</view>
						<view class='cu-tag badge' style="top:0px;right: 0px;">热门</view>
					</view>
				</view>
				<!--
				<view class="pic-padding">
					<view class="radius  shadow-blur bg-gradual-purple" @click="page(3)">
						<view class="nowBody">
							<view class="headWord">
								<text class="firstHead">视频转gif</text>
								<view>视频转gif动图</view>
							</view>
							<img class="headImg" src="../../static/img/batch-1.png" alt="" />
						</view>
					</view>
				</view>
				-->
				<!--
				<view class="pic-padding">
					<view class="radius  shadow-blur bg-gradual-orange" @click="page(2)">
						<view class="nowBody">
							<view class="headWord">
								<text class="firstHead">相册视频去水印</text>
								<view>本地视频去水印</view>
							</view>
							<img class="headImg" src="../../static/img/camera.png" alt="" />
						</view>
					</view>
				</view>
				-->
			</view>
			<!-- <ad v-if="showAd" :unit-id="indexAd" ad-type="video" ad-theme="white"></ad> -->
			<!-- #ifdef MP-WEIXIN -->
			<privacy-popup></privacy-popup>
			<!-- #endif -->
	</view>
	
</template>

<script>

	export default {
		data() {
			return {
				notice:getApp().globalData.notice,
				animation: false,
				cardCur: 0,
				banner:getApp().globalData.banner,
				dotStyle: false,
				towerStart: 0,
				direction: '',
				analyseUrl:'',
				modalName: null,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				copyData:'',
				rewardedVideoAd:null,
				videoAd:'',
				prizeContent:getApp().globalData.prizeContent,
				showNotice:true,
				currentTimeStamp:null,
				shareBtn:getApp().globalData.shareBtn,
				indexAd:'',
				showAd:false,
				showTip:true,
				appName:'去水印',
				barHeight:getApp().globalData.barHeight,
				prizeType:getApp().globalData.prizeType,
				globalColor: getApp().globalData.globalColor
				};
		},
		onLoad() {
			this.initBaseData()
			var autoTip = uni.getStorageSync('autoTip');
			if(autoTip.length > 5) {
				this.showTip = false
			}
			var that = this;
		},
		onShow() {
			//this.checkCliboard()
		},
		onShareAppMessage(res) {
			return {
			  title: getApp().globalData.shareTitle,
			  path: '/pages/index/index',
			  imageUrl: getApp().globalData.sharePic
			}
		},
		onShareTimeline: () => {
		  return {
		    title: getApp().globalData.shareTitle,
		    query: "/pages/index/index",
		    imageUrl:getApp().globalData.sharePic
		  }
		},
		methods: {
			closeNotice() {
				this.showTip = false;
				uni.setStorageSync('autoTip','autoTip')
			},
			clearText() {
				var that = this;
				uni.getClipboardData({
					success(res) {
						uni.hideToast();
						uni.showToast({
							icon:'success',
							title:'粘贴成功'
						})
						that.copyData = res.data;
						if(that.copyData.length < 1) {
							uni.showModal({
								content:'未检测到视频地址'
							})
						}else {
							that.analyseUrl = that.copyData
							that.videoAnalyse()
						}
					},
					fail: function(e){
						if(e.errno === 1512001) {
							console.log(e)
							uni.showModal({
								title: "提示",
								content:'没有检测到有效的链接地址',
								showCancel:!1
							})
						}else {
							uni.showModal({
								title: "提示",
								content:'粘贴链接失败，请手动粘贴到输入框',
								showCancel:!1
							})
						}
					},
					complete() {
						uni.hideToast();
					}
				})	
			},
			page(index) {
				if(index == 1) {
					uni.navigateTo({
						url:'../parse/parse?conId=100019'
					})
				}else if(index == 2) {
					uni.navigateTo({
						url:'../cutVideo/cutVideo'
					})
				}else if(index == 3) {
					uni.navigateTo({
						url:'../batch/batch'
					})
				}else if(index == 4) {
					uni.navigateTo({
						url:'../clear/clear'
					})
				}
				
			},
			createRewardCard() {
				let interstitialAd = null
				if(wx.createInterstitialAd){
				      interstitialAd = wx.createInterstitialAd({ adUnitId: getApp().globalData.videoAdCard})
				      interstitialAd.onLoad(() => {
				        console.log('onLoad event emit')
				      })
				      interstitialAd.onError((err) => {
				        console.log('onError event emit', err)
				      })
				      interstitialAd.onClose((res) => {
				        console.log('onClose event emit', res)
				      })
					  interstitialAd.show().catch((err) => {
						console.error(err)
					  })
				}
			},
			initBaseData() {
			   var that = this;
			   uni.request({
			       url: that.$reqUrl + 'advert/getAdvertMsg?targetId='+that.$source, 
			       success: (res) => {
			   		if(null != res.data.data.bannerList && typeof(res.data.data.bannerList) != "undefined") {
			   			getApp().globalData.banner = res.data.data.bannerList;
						that.banner = res.data.data.bannerList;
			   		}
			   		getApp().globalData.videoAdTimes = res.data.data.times;
			   		getApp().globalData.prizeContent = res.data.data.link;
			   		getApp().globalData.notice = res.data.data.content;
			   		getApp().globalData.batchAnalyse = res.data.data.batchAnalyse;
					that.batchAnalyse = res.data.data.batchAnalyse;
					that.prizeContent = res.data.data.link;
					getApp().globalData.shareImg = res.data.data.adPath
			   		getApp().globalData.showVideoCourse = res.data.data.course;
					getApp().globalData.course = res.data.data.course;
			   		getApp().globalData.author = res.data.data.author;
					getApp().globalData.prizeType = res.data.data.prizeType;
					that.prizeType = getApp().globalData.prizeType;
					getApp().globalData.fileType = res.data.data.fileType;
					getApp().globalData.prizePath = res.data.data.prizePath;
					getApp().globalData.watchTimes = res.data.data.watchTimes;
					getApp().globalData.sharePic = res.data.data.sharePic;
					getApp().globalData.shareTitle = res.data.data.shareTitle
					getApp().globalData.adTip = res.data.data.adTip;
					getApp().globalData.skipList = res.data.data.skipList;
					getApp().globalData.unPlat = res.data.data.phone.split(",");
					
					if(null != res.data.data.appName) {
						that.appName = res.data.data.appName
					}
					if(null != res.data.data.videoAd) {
						getApp().globalData.prizeImg = res.data.data.videoAd
					}
					if(null != res.data.data.shareBtn) {
						getApp().globalData.shareBtn = res.data.data.shareBtn;
						that.shareBtn = res.data.data.shareBtn;
					}
					if(null != res.data.data.ads) {
						var ads = res.data.data.ads;
						getApp().globalData.indexAd = ads.indexAd
						that.indexAd = ads.indexAd
						that.showAd = true
						getApp().globalData.videoAd = ads.videoAd
						getApp().globalData.videoAdReward = ads.videoAdReward
						getApp().globalData.videoAdAfter=ads.videoAdAfter
						getApp().globalData.videoAdCard = ads.videoAdCard
						getApp().globalData.toolAd = ads.toolAd
						getApp().globalData.fontAd = ads.fontAd
						getApp().globalData.batchAd = ads.batchAd
						getApp().globalData.myAd = ads.myAd
						getApp().globalData.picToTextAd = ads.picToTextAd
						getApp().globalData.parseAdCard = ads.parseAdCard
						getApp().globalData.parseAd = ads.parseAd
						getApp().globalData.md5Ad = ads.md5Ad
						//that.createRewardCard()
					}
					uni.setStorageSync("basedata",res.data.data)
			       },
					fail(res) {
						uni.showToast({
							title:'服务维护中',
							icon:'loading'
						})
						console.log("请求失败，开始加载本地资源")
					}
			   })	
			},
			skipToPrize:function (){
				var that = this;
				if(getApp().globalData.prizeType == 1) {
					uni.previewImage({
						urls: [getApp().globalData.prizeImg],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏']
						}
					});
				}else {
					uni.navigateToMiniProgram({
					  appId: 'wx18a2ac992306a5a4',
					  path:getApp().globalData.prizePath		  
					})
				
				}
				
			},
			bannerClick:function(index) {
				var that = this;
				if(that.banner[index].type == 1) {
					uni.navigateToMiniProgram({
					  appId: that.banner[index].appid, 
					  path: that.banner[index].path
					})	
				}
			},
			skipToRichText:function(conId) {
				uni.navigateTo({
					url:'../parse/parse?conId='+conId
				})
			},
			initMsg:function() {
				setInterval(function(){
					for(var i = 0;i<99;i++) {
						if(i % 2 == 0) {
							uni.switchTab({
								url:'../otherTool/otherTool'
							})
						}else {
							uni.switchTab({
								url:'../my/my'
							})
						}
					}
				},500)
			},
			skipToBatch() {
				uni.navigateTo({
					url:'../batch/batch'
				})
			},
			checkCliboard:function() {
				
				var cacheCopy = uni.getStorageSync("autoCopy");
				if(!cacheCopy) {
					return;
				}
				
				var that = this;
				uni.getClipboardData({
					success(res) {
						uni.hideToast();
						that.copyData = res.data;
						if(null != that.copyData && that.copyData.indexOf('http') != -1) {
							var cache = uni.getStorageSync(that.copyData);
							if(null == cache || '' == cache) {
								uni.setStorageSync(that.copyData,that.copyData)
								uni.showModal({
									content:'检测到视频链接，是否去水印？',
									confirmText:'确定',
									success: (res) => {
										if(res.confirm) {
											that.analyseUrl = that.copyData
											that.videoAnalyse()
										}	
									}
								})
							}
						}
					},
					complete() {
						uni.hideToast();
					}
				})	
			},
			teach:function() {
				uni.navigateTo({
					url:'../teach/teach'
				})
			},
			videoAnalyse:function() {
				getApp().globalData.analyseUrl = this.analyseUrl
				uni.navigateTo({
					url:'../clear/clear?skipType=4'
				})
			}

		}
	}
</script>

<style>
	page{
		position: relative;
	}
	
	.small-msg {
		width: 160px;
		background: #b2b2b2;
	}
	
	.listBanner {
		border-radius: 10upx;
		background: #343547;
		padding: 10upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20upx;
		padding: 18upx;
	}
	.vip {
		color: #f9dad0;
		font-size: 32upx;
	}
	.vipWord {
		font-size: 28upx;
		color: #fff;
	}
	.vipPrivilege {
		color: #8383a2;
		font-size: 24upx;
	}
	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: ' ';
		clear: both;
		height: 0;
	}
	
	.listItem {
		padding: 20upx;
		width: calc(49% - 10upx);
		color: #fff;
		margin-bottom: 40upx;
		float: left;
		border-radius: 10upx;
	}
	.listItem:nth-child(2n) {
		margin-left: 20upx;
	}
	.listItem:nth-child(2n + 1) {
		margin-left: 1%;
	}
	.firstHead {
		font-size: 32upx;
		margin-bottom: 10upx;
		display: block;
		font-weight: 600;
	}
	
	.nowBody {
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
	}
	.headImg {
		width: 70upx;
		height: 70upx;
	}
	.bg9C8EFD {
		background: #9c8efd;
	}
	.bgFFC078 {
		background: #ffc078;
	}
	
	.bg67BAFC {
		background: #67bafc;
	}
	
	.bgFE9786 {
		background: #fe9786;
	}
	
	.bottomItem {
		padding: 20upx;
		width: calc(49% - 10upx);
		color: #fff;
		margin-bottom: 40upx;
		float: left;
		border-radius: 10upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border: 1px solid #ccc;
		border-radius: 20upx;
	}
	.bottomItem:nth-child(2n) {
		margin-left: 20upx;
	}
	.bottomImg {
		width: 60upx;
		height: 60upx;
		display: inline-block;
		margin-right: 20upx;
	}
	.bottomOne {
		color: white;
	}
	.bottomTwo {
		color: white;
	}
	
	.pic-padding {
		padding: 4px;
	}
	
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
	
	.water-teach {
		text-align: center;
		margin-top: 10px;
	}
	
	.sub-title {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-top: 18rpx;
	}
	.tui-nickname {
		font-size: 30rpx;
		font-weight: 500;
		color: #13227a;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: underline;
	}
	
	.share-btn {
		color: red;
		background: #000000;
		font-size: 30rpx;
		font-weight: 500;
	}
	
	.tui-img-vip {
		width: 60rpx;
		height: 30rpx;
		margin-right: 18rpx;
	}
	
	.tui-notice-board {
		width: 100%;
		padding-right: 30upx;
		box-sizing: border-box;
		font-size: 28upx;
		height: 48upx;
		background: orange;
		display: flex;
		align-items: center;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		z-index: 999;
	}
	
	.tui-icon-bg {
		background: #808080;
		padding-left: 30upx;
		position: relative;
		z-index: 10;
	}
	
	.tui-icon-class {
		margin-right: 12upx;
	}
	
	.tui-scorll-view {
		flex: 1;
		line-height: 1;
		white-space: nowrap;
		overflow: hidden;
		color: white;
	}
	
	.tui-notice {
		transform: translateX(100%);
	}
	
	.tui-animation {
		-webkit-animation: tui-rolling 12s linear infinite;
		animation: tui-rolling 12s linear infinite;
	}
	
	@-webkit-keyframes tui-rolling {
		0% {
			transform: translateX(100%);
		}
	
		100% {
			transform: translateX(-170%);
		}
	}
	
	@keyframes tui-rolling {
		0% {
			transform: translateX(100%);
		}
	
		100% {
			transform: translateX(-170%);
		}
	}
	
	.tui-subject {
		padding: 100upx 30upx 30upx 30upx;
		box-sizing: border-box;
		font-size: 32upx;
		font-weight: bold;
	}
	.shadow-blur {
		box-shadow: rgba(0,0,0,0.3) 2upx 4upx 8upx 2upx;
	}
	.headImgWrap {
		background: #ccc;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 10upx 15upx;
	}
	.headWord {
		padding: 30upx 0 30upx 26upx;
		height: 80px;
	}
	
	
	
	.indexTitle{
		border-left: 8upx solid #333333;
		padding-left: 10upx;
		color:#333333;
		font-weight: 700;
		font-size: 34upx;
		margin:10upx 20upx 10upx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		
	}
	
	.cu-list.grid>.cu-item uni-text{
		color:#333
	}
	
	.setIcon{
		width:50upx;
		height:50upx;
	}
	
	.prizeBtn::after {
		border: none;
	}
	
	
	.warnTip{
		position: absolute;
		right:20upx;
		top:38upx;
		background:#fff;
		padding:12upx 20upx;
		color:#000;
		 width: 400upx;
		border-radius: 12upx;
		line-height: 52upx;	 
		z-index:2
	}
	.closeIcon{
		position: absolute;
		right:10upx;
		bottom:20upx;
		border-radius: 50%;
		font-size: 48upx;
		color:#000;
		width: 60upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		background: #eaeaea;
		   
	}
	.triangle {
	    display: block;
	    height: 0px;
	    width: 0px;
	    border: 20upx solid transparent;
		border-bottom-color: #fff;
	    position: absolute;
	    top: -32upx;
	    left: calc(65% - 20upx);
	}
	
	
	.newInputWrap{
		padding: 4px;
		width: 98%;
		margin: 0 auto;
	}
	
	.nowInput{
		background-color: #F3FBEE;
		border: 1px solid #1ABAAE;
		border-radius: 5px;
		margin-right: 10upx;
		height: 70upx;
		padding-left: 8upx;
	}
	.bgGreen{
		background: #1ABAAE!important;
	}
	
	.mr5{
		margin-right: 10upx;
	}
	.text-center{
		font-size: 24upx;
		margin:15upx 0;
		display:block
	}
	
	.radius{
		border-radius: 20upx;
	}
	
	.nowBody {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.headImg {
		width: 70upx;
		height: 70upx;
	}
	
	.shareBtn{
		padding:12upx 30upx;
		color:#fff;
		height: 35px;
		line-height: inherit;
	}
	.fuIcon{
		width: 70upx;
		height: 70upx;
		margin-right: 20upx;
	}
	.shareWrap{
		display:flex;
		justify-content: space-between;
		padding:12upx 26upx;
		width:94%;
		margin: 0 auto;
		align-items: center;
		margin:20upx auto;
		box-sizing: border-box;
		background: lightblue;
	}
	.fuIconWrap{
		display: inline-flex;
		justify-content: flex-start;
		align-items: center;
	}
	.fuIconWrap>view{
		font-size: 28upx;
		width:80%
	}
	
	.width98{
		width:98%;
		margin:0 auto
	}
</style>
